<template>
	<view>
		<uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		backgroundColor="#eff3f7"
		leftIcon="back"
		@click-left="clickLeft"
		:border="false">
			<view class="index-top-nav-title">
				{{lun>0? i18n.DoubleInvestment:i18n.ExchangeComputingPower}}
			</view>
		</uni-nav-bar>
		<view class="content">
			<view class="buy-power-mes">
				<image src="../../static/imgs/buy-power-bg.png" mode="widthFix" lazy-load></image>
				<view class="item">
					{{i18n.computingPower}}
				</view>
				<view class="item">
					{{sl}} USD
				</view>
			</view>
			<view class="buy-power-content">
				<view class="item">
					<text>{{i18n.AvailableBalance}} USDT</text>
					<view class="">
						{{d_coin}}
					</view>
				</view>
				<view class="item">
					<text>{{i18n.AvailableBalance}} FUT</text>
					<view class="">
						{{b_coin}}
					</view>
				</view>
			</view>
			<view class="buy-way">
				<view class="buy-way-progress">
					<view class="progress">
						<view class="bar">
							<view class="bars"  :style="{width: widthNumbe}"></view>
						</view>
						<view class="centers" :style="{left: widthNumbe}">
							{{i18n.Required}}
						</view>
					</view>
					<view class="proportion">
						<view> {{buyWay[0].usdt_pay}} </view>
						<view>  {{buyWay[0].eth_pay}} </view>
					</view>
					<text>{{buyWay[0].title2}}</text>
				</view>
			</view>
			<view class="buy-way">
				<view class="title">
					{{i18n.paypwd}}
				</view>
				<view class="buy-way-input">
					<input :type="isshow?'text':'password'" value="" maxlength="6" :placeholder="i18n.p_paypwd" v-model="paypwd"/>
					<view class="eye" @tap.stop="isShow">
						<uni-icon 
						type="eye" 
						:color="isshow?'#007AFF':'#999999'" 
						size="16"></uni-icon>
					</view>
				</view>
				<button type="primary" hover-class="active" @tap.stop="confirmBuy">{{lun>0?i18n.DoubleInvestment:i18n.ExchangeComputingPower}}</button>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed:{
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load
		},
		data() {
			return {
				showLoad:false,
				chooseIndex:0,
				isshow:false,
				buyWay:[{title1:'',title2:'',usdt_pay:'',eth_pay:''}],
				sl:'',
				d_coin:'',
				b_coin:'',
				paypwd:'',
				widthNumbe:'',
				shopid:'',
				isclick:false,
				lun:''
			}
		},
		onLoad(e) {
			if(!this.getLoginInfo.paypwd){
				uni.navigateTo({ 
					url:'/pages/modify-pwd/modify-pwd'
				})
			}
			// console.log(JSON.parse(e.item));
			let {all_cz,b_coin,d_coin,day_cb,day_xz,day_yx,usdt_need,usdt_pay,freeze,fruit_need,id,jt_bl,lun,sl,status,title,user_xz} = JSON.parse(e.item);
			this.sl                 = parseFloat(freeze);
			this. lun               = lun;
			this.shopid             = id;
			this.b_coin             = (parseInt(b_coin*10000)/10000).toFixed(4);
			this.d_coin             = (parseInt(d_coin*10000)/10000).toFixed(4);
			this.widthNumbe         = `${(1-usdt_pay)*100}%`;
			this.buyWay[0].usdt_pay = `${(1-usdt_pay)*100}% FUT`;
			this.buyWay[0].eth_pay  = `${usdt_pay*100}% USDT`;
			this.buyWay[0].title1   = `${(1-usdt_pay)*100}% USDT / ${usdt_pay*100}% FUT`;
			this.buyWay[0].title2   = `${(parseInt(fruit_need*10000)/10000).toFixed(4)} FUT / ${usdt_need} USDT`;
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseWay(e){
				this.chooseIndex = e;
			},
			isShow(){
				this.isshow = !this.isshow
			},
			confirmBuy(){
				if(this.isclick){
					return
				}
				if(this.paypwd==''){
					showToast(this.i18n.p_paypwd)
					return
				}
				this.isclick = true;
				let url = this.getRequestUrl + '/api/shop/buy_shop';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLangType=='chs'?1:2,
					paypwd:this.paypwd,
					num:1,
					shopid:this.shopid,
					token_id:3
				}
				// uni.showLoading()
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					// console.log(res);
					// uni.hideLoading()
					this.showLoad = false;
					this.isclick = false;
					showToast(res.data.msg)
					if(res.data.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}else{
						this.paypwd = '';
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoad = false;
					this.isclick = false;
					this.paypwd = '';
				})
			}
		}
	}
</script>
<style>
	body{
		background-color: #eff3f7;
	}
	.index-top-nav-title{
		font-size: 30upx;
		font-weight: bold;
		color: #000000;
		margin-left: -80upx;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding: 0 30upx;
		.buy-power-mes{
			padding: 47upx 49upx 47upx 0;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius:10upx;
			overflow: hidden;
			image{
				position: absolute;
				width: 100%;
				height: auto;
				z-index:-1;
				flex-shrink: 0;
			}
			.item{
				// flex: 1;
				margin-left: 47upx;
				color: #fff;
				margin-top: 32upx;
				font-size: 33upx;
				font-weight: bold;
				&.last-child{
					text-align: right;
				}
			}
		}
		.buy-power-content{
			margin-top: 30upx;
			display: flex;
			justify-content: space-between;
			align-content: center;
			.item{
				flex: 1;
				background-color: #FFFFFF;
				border-radius:10upx;
				text-align: center;
				padding:33upx 0 28upx;
				text{
					font-size:25upx;
					color: #3E4754;
				}
				view{
					margin-top: 12upx;
					font-size: 33upx;
					font-weight: bold;
					color: #1D7DFF;
				}
				&:last-child{
					margin-left: 20upx;
				}
			}
		}
		.buy-way{
			padding:0 15upx 25upx;
			background-color: #FFFFFF;
			border-radius:10upx;
			margin-top:30upx;
			.title{
				line-height: 94upx;
				font-size:24upx;
				color: #2B2E33;
			}
			.buy-way-progress{
				padding-top: 60upx;
				.progress{
					position: relative;
					width: 550upx;
					margin: 0 auto;
					.bar{
						position: relative;
						overflow: hidden;
						height: 40upx;
						width: 550upx;
						border-radius:20upx;
						background-color: #007AFF;
						.bars{
							position: absolute;
							left: 0;
							top: 0;
							height: 60upx;
							background-color: #f00;
							border-radius:20upx;
						}
					}
					.centers{
						position: absolute;
						top: -20upx;
						text-align: center;
						box-shadow: 2upx 2upx 20upx rgba(0,0,0,.1);
						transform: translate(-50%);
						width: 100upx;
						height: 100upx;
						border-radius:50upx;
						background-color: #eff3f7;
						line-height: 100upx;
						font-size:26upx;
					}
				}
				.proportion{
					display: flex;
					width: 550upx;
					margin: 20upx auto;
					justify-content: space-between;
					line-height: 40upx;
					font-size: 24upx;
					color:#5A5A5A;
				}
				text{
					text-align: center;
					display: block;
					margin: 30upx 0 0;
					font-size: 24upx;
					color:#5A5A5A;
				}
			}
			.buy-way-input{
				margin-bottom: 56upx;
				position: relative;
				.eye{
					position: absolute;
					right: 20upx;
					top: 0;
					line-height: 80upx;
					height: 80upx;
					z-index: 999;
				}
				input{
					background-color: #eff3f7;
					line-height: 80upx;
					height: 80upx;
					border-radius:10upx;
					padding-left: 30upx;
				}
			}
			button{
				width: 280upx;
				height: 80upx;
				line-height: 80upx;
				border-radius:40upx;
				margin: 0 auto;
				font-size:26upx;
				background: linear-gradient(to right, #0C48E0, #2AA2FF);
				&.active{
					transform: scale(.9);
					opacity: .9;
				}
			}
		}
	}
</style>
